<template>
  <div class="visitor">
    <h1 class="visitor-title">{{ msg }}</h1>
    {{visitor}}
    <div class="visitor-edit">
      <div class="visitor-from">
        <div class="input-group">
          <div class="input-group__label">
            <span>姓名</span>
          </div>
          <div class="input-group__value">
            <input type="text" placeholder="请填写姓名" v-model="record.visName" />
          </div>
          <div
            class="input-group__btn"
            v-if="record.visName"
            @click="cleanInput('visName', record.visName)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group__label">
            <span>性别</span>
          </div>
          <div class="input-group__value">
            <input type="text" placeholder="请选择性别" v-model="record.visGender"/>
          </div>
          <div
            class="input-group__btn"
            v-if="record.visGender"
            @click="cleanInput('visGender', record.visGender)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group__label">
            <span>手机号码</span>
          </div>
          <div class="input-group__value">
            <input type="text" placeholder="请填写手机号码" v-model="record.visPhone" />
          </div>
                    <div
            class="input-group__btn"
            v-if="record.visPhone"
            @click="cleanInput('visPhone', record.visPhone)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group__label">
            <span>来访事由</span>
          </div>
          <div class="input-group__value">
            <input type="text" placeholder="请填写来访事由" v-model="record.visReason"/>
          </div>
                    <div
            class="input-group__btn"
            v-if="record.visReason"
            @click="cleanInput('visReason', record.visReason)"
          >
            <svg
              class="icon"
              style="
                width: 1.6em;
                height: 1.6em;
                vertical-align: middle;
                fill: currentColor;
                overflow: hidden;
              "
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1017"
            >
              <path
                d="M361.2 691.7c-6.4 0-12.8-2.4-17.7-7.3-9.8-9.8-9.8-25.6 0-35.3l304.4-304.4c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L378.9 684.4c-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1018"
              ></path>
              <path
                d="M665.6 691.7c-6.4 0-12.8-2.4-17.7-7.3L343.6 380c-9.8-9.7-9.8-25.6 0-35.3 9.8-9.8 25.6-9.8 35.3 0l304.4 304.4c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.3-17.7 7.3z"
                fill="#586168"
                p-id="1019"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="visitor-edit__buttons">
      <div class="button" @click="submit()">
        <div class="button__text">提交</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'
import { reqAddRecord } from '../../api/index'
interface Record {
  [index:string]:string,
  visName:string,
  visGender:string,
  visPhone:string,
  visReason:string
}

export default {
  name: 'Visitor',
  setup() {
    const msg = ref('来访登记')
    const record:Record = reactive({
      index: '',
      visName: '',
      visGender: '',
      visPhone: '',
      visReason: ''
    })
    function cleanInput(key: string, value: string): void {
      if (value) {
        record[key] = ''
      }
    }
    async function submit():Promise<void> {
      const result = await reqAddRecord(record)
      const data:any = result.data
      console.log(result.data)
      if (data.msg === '成功') {
        alert('成功！')
        for (const key in record) {
          if (Object.prototype.hasOwnProperty.call(record, key)) {
            record[key] = ''
          }
        }
      } else {
        for (const key in data.data) {
          if (Object.prototype.hasOwnProperty.call(data.data, key)) {
            alert(data.data[key])
          }
        }
      }
    }
    return {
      msg,
      record,
      cleanInput,
      submit
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.visitor {
}
.visitor-title{
  font-size:4.8rem;
  color:#00a1d6;
}
.visitor-edit {
  padding: 2rem;
}
.visitor-from {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
.input-group {
  display: flex;
  flex-wrap: nowrap;
  font-size: 3.6rem;
  line-height: 7.2rem;
  background-color: #fff;
  padding: 1rem 1.6rem;
}
.input-group__label {
  flex-shrink:0; /* 当flex空间不足，该项目不发收缩 */
  width: 22rem;
  box-sizing: border-box;
  word-wrap: break-word;
  box-sizing: border-box;
  padding-right: 3.6rem;
}
.input-group__label span {
  display: inline-block;
  width: 100%;
  text-align-last: justify;
  box-sizing: border-box;
}

.input-group__value {
  box-sizing: border-box;
}
.input-group__value input {
  width: 100%;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #323233;
  line-height: inherit;
  text-align: left;
  background-color: transparent;
  border: 0;
  resize: none;
  cursor: text;
  font-size: 3.6rem;
  line-height: 7.2rem;
  color: #323233;
  outline: none;
}
input::placeholder {
  color: rgb(225, 228, 225);
}
.input-group__value textarea {
  display: inline-block;
  width: 100%;
  outline: none;
  border: 0;
}
.input-group__btn{
  flex-shrink:0; /* 当flex空间不足，该项目不发收缩 */
  cursor: pointer;
}
.visitor-edit__buttons {
  padding: 3.2rem 0;
  color: #fff;
}
.visitor-edit__buttons .button {
  padding: 0 2rem;
  cursor: pointer;
}
.visitor-edit__buttons .button__text {
  position: relative;
  background-color: #00a1d6;
  border-radius: 1rem;
  font-size: 3.8rem;
  line-height: 7.2rem;
  padding: 1rem 0;
  box-sizing: border-box;
  text-align: center;
}
.visitor-edit__buttons .button__text::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 10;
}
</style>
